<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>ATM领取购买记录</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Col span="3" class="mr-10">
                <city @ProvinceData="childByValue"></city>
            </Col>
            <Col span="7">
                <DatePicker v-model="queryData.startTime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                &nbsp;-&nbsp;
                <DatePicker v-model="queryData.endTime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
            </Col>
            <Input class="mr-10" placeholder="卡号" v-model="queryData.insertName" style="width:200px;" />
            <Input class="mr-10" placeholder="机器编号" v-model="queryData.machineid" style="width:200px;" />
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ATMApi from "@/api/base_sys/ATMrecord.js";
// import moment from "moment";
import {Message} from "iview";
import city from "@/view/test/city.vue"
import global from '@/assets/js/global'

  export default {
    components: {
      city
    },
    data() {
      return {
        url: '/api/ckFafangGoodsget/list',
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "记录序号",
              key: "id",
              align: "center",
              minWidth:80
            },
            {
              title: "机器编号",
              key: "machineCode",
              align: "center",
              minWidth:115
            },
            {
              title: "机器名称",
              key: "machineName",
              align: "center",
              minWidth:100
            },
            {
              title: "领取渠道",
              key: "getChannel",
              align: "center",
              minWidth:85
            },
            {
              title: "领取账号/卡号",
              key: "getNo",
              align: "center",
              minWidth:100
            },
            {
              title: "商品编号",
              key: "goodsId",
              align: "center",
              minWidth:80
            },
            {
              title: "商品名称",
              key: "goodsName",
              align: "center",
              minWidth:80
            },
            {
              title: "商品电子编号",
              key: "goodsEpc",
              align: "center",
              minWidth:100
            },
            {
              title: "货道序号",
              key: "huodaoIndex",
              align: "center",
              minWidth:50
            },
            {
              title: "格子序号",
              key: "geziIndex",
              align: "center",
              minWidth:50
            },
            {
              title: "SYS领取状态",
              key: "getStatus",
              align: "center",
              minWidth:50,
              render: (h, params) => {
                if (params.row.getStatus == '0') {return h('div', '正在掉落');} 
                else if(params.row.getStatus == '1') {return h('div', '掉落成功');}
                else if(params.row.getStatus == '2'){return h('div', '掉落失败');}
                else {return h('div', '机器未收到');}
              }
            },
            {
              title: "STS领取时间",
              key: "getTime",
              align: "center",
              minWidth:150
            },
            {
              title: "领取方式",
              key: "getType",
              align: "center",
              minWidth:50,
              render: (h, params) => {
                if (params.row.getType == '00') {return h('div', '刷卡领取');} 
                else if(params.row.getType == '01') {return h('div', '短信领取');}
                else if(params.row.getType == '02'){return h('div', '积分换购');}
              }
            },
            {
              title: "上送编号",
              key: "upgoodsId",
              align: "center",
              minWidth:80
            },
            {
              title: "掉落匹配方式",
              key: "downgoodDatatype",
              align: "center",
              minWidth:80
            },{
              title: "掉落匹配时间",
              key: "downgoodtime",
              align: "center",
              minWidth:70
            },{
              title: "操作",
              key: "id",
              align: "center",
              minWidth:70,
              render: (h, params) => {
                return h('div',[
                  // 创建按钮
                  h('i-button',{
                      props: { type: 'error', size: 'small',},
                      style: {margin: '0 3px'},
                      on: {
                          click:()=> {
                              this.deleData(params.row.id)
                          }
                      }
                  },'删除')
                ])
              }
            },
          ]
        },
        // 页面查询数据
        queryData: {
            limit: 10,
            page: 1,
            totalRecord: 0,
            userId: '', // 卡号
            machineid: '', // 机器编号
            startTime: '', // 开始时间
            endTime: '', // 结束时间
        }
      }
    },
    created() {
      let area = window.defArea
      this.queryData.provid = area[0]
      this.queryData.cityid = area[1]
      this.queryData.distid = area[2]
      this.getTableData();
    },
    methods: {
      click() {
        let getCities = this.value;
      },
      // 获取列表
      async getTableData() {
        this.queryData.startTime = global.time(this.queryData.startTime)
        this.queryData.endTime = global.time(this.queryData.endTime)
        console.log(this.queryData);
        this.queryData.totalRecord = undefined;
        let result = await ATMApi.getList(this.url,this.queryData)
        console.log(result);
        // return
        this.list.tableData = result.data.list;
        this.queryData.totalRecord = result.data.totalRecord;
        this.queryData.limit = result.data.pageSize;
      },
      // 删除数据
      async deleData(id) {
        let result = await ATMApi.delete(`/api/ckFafangGoodsget/${id}`)
        if(result.data==1) {
          this.$Message.success("操作成功")
          this.getTableData()
        }else {
          this.$Message.error("操作失败")
        }
      },
      childByValue(newObject) {
        this.queryData.provid = newObject.provid||'';
        this.queryData.cityid = newObject.cityid||'';
        this.queryData.distid = newObject.distid||'';
        this.queryData.strtid = newObject.strtid||'';
        this.queryData.commid = newObject.commid||'';
        this.queryData.comminid = newObject.comminid||'';
      },
      //查询
      inQuire() {
		    this.queryData.page=1;
        this.getTableData();
      },
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },
      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },
    },

    
  };
</script>
